<template>
	<view class="pd30">
		<u--textarea v-model="value1" placeholder="请输入弹幕互动话术或者话术描述通过ChatGPT生成" height="120" maxlength="300"
			count></u--textarea>
		<!-- <view class="gpt" @click="chat">
			文案生成
		</view> -->

		<uni-combox :candidates="candidates" class="mt30" placeholder="请选择音色" v-model="timbre"></uni-combox>

		<view class="df alcenter">
			音频语速：
			<view style="width: 72vw;">
				<u-slider v-model="value" min="-5" max="5" showValue></u-slider>
			</view>
		</view>

		<!-- <view class="mt80 text-center">
			<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name"
				:author="current.author" :action="audioAction" controls></audio>
		</view> -->

		<view class="btnBox">
			<view class="btn btn1" @click="generate">
				点击生成
			</view>
			<view class="btn btn2" @click="submit">
				提交音频
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "audioSynthesis",
		data() {
			return {
				value1: '',
				value: 0,
				candidates: [],
				// voiceList: [],
				timbre: '',
				current: {
					poster: '',
					name: '暂未生成音频',
					author: '',
					src: '',
				},
				audioAction: {
					method: 'pause'
				}
			};
		},
		props: {
			voiceList: {
				type: Array,
				default: []
			},
			title: {
				type: String,
				default: ''
			},
			audio_name: {
				type: String,
				default: ''
			},
		},
		watch: {
			voiceList: {
				handler(newVal) {
					console.log('cutt', newVal);
					newVal.map(i => {
						this.candidates.push(i.name)
					})
				},
				immediate: true
			}
		},
		methods: {
			chat() {
				if (!this.value1) {
					this.$tools.toast('请输入话术描述生成文案！');
					return
				}
				uni.showLoading({
					title: 'Chat GPT正在努力工作中...'
				});
				let params = {
					message: this.value1
				}
				this.$api.completions(params).then(res => {
					uni.hideLoading();
					this.$tools.toast(res.msg);
					console.log('res', res.data);
					if (res.code == 200) {
						this.value1 = res.data.message
					}
				})
			},
			generate() {
				if (!this.value1) {
					this.$tools.toast('请输入弹幕互动话术生成音频！');
					return
				}
				if (!this.timbre) {
					this.$tools.toast('请选择音色后提交！');
					return
				}
				let voice;
				this.voiceList.map(r => {
					if (r.name == this.timbre) {
						voice = r.id
					}
				})
				this.$emit('generate', {
					sound_text: this.value1,
					speech_rate: this.value * 100,
					voice
				})
			},
			submit() {
				console.log(this.current);
				if (this.current.src) {
					this.$emit('submit', this.current.src)
				} else {
					this.$tools.toast('请生成音频后提交！');
				}
			}
		}
	}
</script>

<style lang="less">
	::v-deep {
		.uni-slider-handle-wrapper {
			height: 12rpx !important;
		}

		// .u-textarea {
		// 	padding-top: 60rpx !important;
		// }

		uni-slider .uni-slider-value {
			width: 0;
		}

		.uni-combox__selector {
			z-index: 9;
			// background: #f7fbfe !important;
		}

		.u-border {
			border-color: #88898b !important;
		}

		.u-textarea,
		.u-textarea__count,
		.uni-audio-default {
			background: #f7fafc !important;
			border:0 !important;
		}
	}

	.gpt {
		position: relative;
		top: -300rpx;
		right: -74vw;
		background: #f9ae3d;
		color: #fff;
		font-size: 28rpx;
		padding: 4rpx 6rpx;
		border-radius: 10rpx;
		width: 15vw;
		text-align: center;
	}

	.btnBox {
		position: fixed;
		bottom: 40rpx;
		width: 94vw;
		left: 3vw;
		display: flex;
		justify-content: space-between;

		.btn {
			width: 45vw;
			background: #f5f7fa;
			border-radius: 20rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			color: #fff;
		}

		.btn1 {
			background-color: #6a8bff;
		}

		.btn2 {
			background-color: #5ac725;
		}

	}
</style>